<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getContextPath();
	String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+basePath+"/";
	request.setAttribute("path",path);
%>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<meta name="format-detection" content="telephone=no,address=no,email=no"/>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<title>商品详情</title>
	<link href="${path}/mobileTerminal/css/style.css" rel="stylesheet" media="all">
	<script src="${path}/mobileTerminal/js/product_img.js"></script>
	<script src="${path}/mobileTerminal/js/jquery.js"></script>
	<script type="text/javascript" src="${path}/mobileTerminal/js/jquery.spinner.js"></script><!--数量加1-->
	<link rel="shortcut icon" href="${path}/mobileTerminal/img/favicon.png">
</head>
<script>
    $(".protop_img imgs").each(function () {
        var ww = $(".protop_img").width();
        var w = $(this).width();
        var ml = Math.round((parseInt(ww));
        $(this).css({ marginLeft: ml + "px" })
    })
</script>
<body class="hu_shopping">
	<header>
		<div class="headerwrap">
			<div class="header_wrap">
				<a href="javascript:history.go(-1);" class="return_last">返回</a>
				<h1>商品详情</h1>
			</div>
		</div>
	</header><!-- header -->
	<div class="content_wrap" id="product_details_wrap">
		<%--<c:forEach items="${ProductsDetails}" var="items">--%>
		<div class="product_top">
			<div class="protop_wrap">
 			 <div class="flicking_con">
 			 <a class="on" href="#@">1</a>
 			 <a href="#@">2</a>
			 <a href="#@">3</a>
  			 <a href="#@">4</a>
            <a href="#@">5</a>
        </div>
        <div class="protop_img">
          <ul>
      		<li> <img src="${path}/${ProductsDetails.carousel0}"></li>
      		<li> <img src="${path}/${ProductsDetails.carousel1}"></li>
      		<li> <img src="${path}/${ProductsDetails.carousel2}"></li>
      		<li> <img src="${path}/${ProductsDetails.carousel3}"></li>
	  		<li> <img src="${path}/${ProductsDetails.carousel4}"></li>
   		 </ul>
  		</div>
	</div>

			<h2>${items.productName}</h2>
			<div class="price_sales">
				<div class="original_price_num fl">￥<span class="red_txt">${ProductsDetails.nowPrice}</span></div>
				<div class="present_price_num fl">价格 ￥<span>${ProductsDetails.originalPrice}</span></div>
				<div class="flash_sale fl">限时抢购</div>
				<div class="clear"></div>
			</div>
			<div class="sales_num">销量<span>${ProductsDetails.basicsNum}</span></div>
		</div><!-- product_top -->
		
		<div class="product_parameters">
			<h3>产品参数</h3>
			<ul>
				<li><span class="parameters_title">品牌:</span><span>${ProductsDetails.brand}</span></li>
				<li><span class="parameters_title">摆型:</span><span>${ProductsDetails.pendulumType}</span></li>
				<li><span class="parameters_title">领型:</span><span>${ProductsDetails.collarType}</span></li>
				<li><span class="parameters_title">袖长:</span><span>${ProductsDetails.sleeve}</span></li>
				<li><span class="parameters_title">颜色:</span><span>${ProductsDetails.color}</span></li>
				<li><span class="parameters_title">面料:</span><span>${ProductsDetails.fabric}</span></li>
				<li><span class="parameters_title">风格:</span><span>${ProductsDetails.style}</span></li>
				<li><span class="parameters_title">尺码:</span><span>${ProductsDetails.size}</span></li>
				<li><span class="parameters_title">腰型:</span><span>${ProductsDetails.waistType}</span></li>
				<li><span class="parameters_title">货号:</span><span>${ProductsDetails.productCode}</span></li>
				<li><span class="parameters_title">年份/季节:</span><span>${ProductsDetails.year}</span></li>
				<li><span class="parameters_title">使用场景:</span><span>${ProductsDetails.scene}</span></li>
				<li><span class="parameters_title">流行元素:</span><span>${ProductsDetails.elements}</span></li>
				<li><span class="parameters_title">服饰工艺:</span><span>${ProductsDetails.technology}</span></li>
				<li><span class="parameters_title">适用对象:</span><span>${ProductsDetails.object}</span></li>
				<li><span class="parameters_title">适用年龄:</span><span>${ProductsDetails.age}</span></li>
				<div class="clear"></div>
			</ul>
		</div><!-- product_parameters -->
		
		<div class="product_image">
			<h3>商品大图</h3>
			<img src="${path}/${ProductsDetails.detailDrawing0}">
			<img src="${path}/${ProductsDetails.detailDrawing1}">
			<img src="${path}/${ProductsDetails.detailDrawing2}">
		</div><!-- product_image -->
		<%--</c:forEach>--%>
		<div class="product_comment">
			<h3>宝贝评论</h3>
			<ul>
				<c:if test="${commentListSize!=0}">
				<c:forEach items="${commentList}" var="item">
				<li>
					<div class="user_img fl">
						<img src="${path}/${item.userPicture}">
						<div class="dummy"></div>
					</div>
					<div class="user_txt fl">
						<div class="user_title">
							<span class="user_name">${item.userName}</span>
							<span>${item.startDate}</span>
						</div>
						<p>${item.content}</p>
					</div>
					<div class="clear"></div>
				</li>
				</c:forEach>
				</c:if>
				<c:if test="${commentListSize==0}">
					暂时还没有评论!
				</c:if>
			</ul>
			
		</div><!-- product_comment -->

		<div class="go_collectionbuy">
			<div class="go_collection fl">
				<c:if test="${type!=0}">
					<a href="${path}/deleteCollection?collectionId=${collection.id}&&id=${ProductsDetails.id}" id="collection"><img id="collection_img" src="${path}/mobileTerminal/img/collection_icon_10.png"><span id="collection_btn">收藏</span></a>
				</c:if>
				<c:if test="${type==0}">
					<a href="${path}/addCollection?id=${ProductsDetails.id}" id="collection"><img id="collection_img" src="${path}/mobileTerminal/img/collection_icon_09.png"><span id="collection_btn">收藏</span></a>
				</c:if>
			</div>
			<div class="go_buy fl">
				<input id="Button1" type="button" value="立即购买" onclick="ShowDiv('MyDiv')" />
			</div>
			<div class="clear"></div>
		</div><!-- go_collectionbuy -->
			<form name="form1" method="post"  action="${path}/orderConfirm" id="form1">
		<div class="go_choosebuy"  id="MyDiv">
			<div class="closediv"><span onclick="CloseDiv('MyDiv')"></span></div>
			
			<div class="choose_model">
				<span>选择型号</span>
				<select id="productId" name="productId">
				  <option value="${ProductsDetails.id}">${ProductsDetails.color}/${ProductsDetails.size}</option>
				</select>
				<div class="clear"></div>
			</div>
			<div class="choose_num">
				<span>选择数量</span>
				<input id="choose_num fl" type="text" name="num" class="spinnerExample"/>
				<div class="clear"></div>
			</div>
			<div class="go_collectionbuy">
				<div class="go_buy fl">
					<button type="submit">确定</button>
				</div>
				<div class="clear"></div>
			</div><!-- go_collectionbuy -->
		</div>
			</form><!-- go_choosebuy -->
	</div><!-- content_wrap -->
	<script type="text/javascript">
        //弹出隐藏层
		function ShowDiv(show_div){
		document.getElementById(show_div).style.display='block';
		//document.getElementById(bg_div).style.display='block' ;
		//var bgdiv = document.getElementById(bg_div);
		//bgdiv.style.width = document.body.scrollWidth;
		// bgdiv.style.height = $(document).height();
		//$("#"+bg_div).height($(document).height());
		};
		//关闭弹出层
		function CloseDiv(show_div){
		document.getElementById(show_div).style.display='none';
		//document.getElementById(bg_div).style.display='none';
		};
    </script>

		


	<div class="footer_copyright">
		<p>苏州知行合一网络科技有限公司提供技术支持</p>
	</div><!-- footer_copyright -->

<script>
$('.spinnerExample').spinner({});//数量加1
///收藏
$("#collection").click(function() {
  if ($("#collection_btn").text() == '收藏' ) {
    $("#collection_btn").text('取消收藏');
	var src = "${path}/img/collection_icon_10.png";    //新图片地址
    $(this).find("imgs").attr("src",src);    //更换图片地址
  } else {
    $("#collection_btn").text('收藏');
	var src = "${path}/img/collection_icon_09.png";
    $(this).find("imgs").attr("src",src);
  }

});
</script>
</body>
</html>